<!--
* description: 车辆管理-车籍异动查询
* author: ligy
* createdDate: 2020-11-19
-->
<template>
  <div class="app-container app-container-table">
    <one-table-template
      ref="multipleTable"
      :dynamic-buttons="tableButtons"
      :dynamic-components="tableComponents"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-select="false"
      :dynamic-is-init-table="true"
      :dynamic-is-fix-choose="false"
      :dynamic-is-fix-index="false"
      :dynamic-api-style="'restful'"
    />
    <edit
      v-if="showdia"
      dynamic-api-style="restful"
      :popups-visible.sync="showdia"
      :data-for-form="clickRowsData"
      @close="popClose"
    />
  </div>
</template>

<script>
import { oneTableWithViewTemplateMixins } from '@/components/mixins/oneTableWithViewTemplateMixins'
import OneTableTemplate from '@/components/templates/oneTable'
import api from '@/api/vehicleManagement'

export default {
  components: {
    OneTableTemplate,
    Edit: () => import('./edit')
  },
  mixins: [oneTableWithViewTemplateMixins],
  data() {
    return {
      clickRowsData: {},
      showdia: false,
      apiConfig: api.selectVehicleRegistration,
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
            {
              prop: '',
              label: '操作',
              width: 100,
              isComponent: true,
              comps: [
                {
                  compKey: 'propKey0',
                  labelName: '查看',
                  codeField: '',
                  clickEvent: index => this.edit(index),
                  component: () => import('@/components/org/linkButton')
                }
              ]
            },
            {
              prop: 'vin',
              label: 'VIN码',
              width: 140
            },
            {
              prop: 'salesPlanCode',
              label: '销售计划号',
              width: 140
            },
            {
              prop: 'carSeriesCode',
              label: '车系编码'
            },
            {
              prop: 'carSeriesCn',
              label: '车系名称'
            },
            {
              prop: 'carConfigCode',
              label: '基础车型编码'
            },
            {
              prop: 'carConfigCn',
              label: '基础车型名称'
            },
            {
              prop: 'optionalPagName',
              label: '选装包'
            },
            {
              prop: 'carColorName',
              label: '车身颜色'
            },
            {
              prop: 'carIncolorName',
              label: '内饰颜色'
            },
            {
              prop: 'BatteryNo',
              label: '电池型号'
            },
            {
              prop: 'BatteryNumber',
              label: '电池编码'
            },
            {
              prop: 'MotorNum',
              label: '前电机'
            },
            {
              prop: 'EngineNo2',
              label: '后电机'
            },
            {
              prop: 'ExtendCode',
              label: '增程器'
            },
            {
              prop: 'IccidCode',
              label: 'ICCID'
            },
            {
              prop: 'PdsnCode',
              label: 'PDSN'
            },
            {
              prop: 'ImeiCode',
              label: 'IMEI'
            },
            {
              prop: 'hostQualityState',
              label: '质量状态'
            },
            {
              prop: 'offlineDate',
              label: '下线日期',
              width: 140
            },
            {
              prop: 'produceDate',
              label: '生产日期',
              width: 140
            },
            {
              prop: 'firstInDlrStockDate',
              label: '入库日期',
              width: 140
            },
            {
              prop: 'saleOrderCode',
              label: 'DMS订单编号',
              width: 140
            },
            {
              prop: 'custName',
              label: '客户名称'
            }
          ],
      tableComponents:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
          .tableComponents.length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path]
            .tableComponents
          : [
            {
              compKey: 'compKey1',
              labelName: 'VIN码：',
              codeField: 'vin',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true
            },
            {
              compKey: 'compKey2',
              labelName: '销售计划号：',
              codeField: 'salesPlanCode',
              component: () => import('@/components/org/commonInput'),
              type: 'inputText',
              isMul: false,
              isMust: true
            }
          ],
      tableButtons: [
        {
          conmpKey: 'btenKey1',
          type: 'primary',
          size: 'small',
          text: '查询',
          clickEvent: () => this.queryTable(1),
          position: 'right'
        },
        {
          conmpKey: 'btenKey2',
          type: '',
          size: 'small',
          text: '重置',
          name: 'reset',
          clickEvent: () => this.reset(),
          position: 'right'
        }
      ],
      formField: {
        vin: '',
        salesPlanCode: ''
      }
    }
  },
  mounted() {
    setTimeout(() => {
      this.queryTable(1)
    }, 0)
  },
  methods: {
    popClose(type) {
      this.this.showdia = false
      if (type === 1) {
        this.queryTable(1)
      }
    },

    // 查看
    edit(index) {
      this.clickRowsData = this.$refs['multipleTable'].list[index]
      this.showdia = true
    }
  }
}
</script>
